<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery/jquery1.7/jquery-1.7.js"></script>
    <script>
       $(function(){
            $("#btn1").click(function(){
                $("div span").css("background","red");
            });
            $("#btn2").click(function(){
                $("div > span").css("background","green");
            });
            $("#btn3").click(function(){
                //紧邻在div后面的p标签
                $("div + p").css("background","green");
            });
            $("#btn4").click(function(){
                // 同级别的情况下，div后面的h5
                $("div ~ h5").css("background","green");
            });
       });
    </script>
</head>
<body>
    <input type="button" value="后代选择器" id="btn1">
    <input type="button" value="子元素选择器" id="btn2">
    <input type="button" value="相邻择器" id="btn3">
    <input type="button" value="兄弟选择器" id="btn4">
    <p>p</p>
    <h5>h5</h5>
    <div id="first">itany01
        <span>span01</span>
        <span>span02</span>
        <p>
            <span>span03</span>
        </p>
    </div>
    <div class="hehe">itany02</div>
    <div>itany03</div>
    <div class="hehe">itany04</div>
    <div>itany05</div>
    <p>p01</p>
    <p>p02</p>
    <p class="hehe">p03</p>
    <p>p04</p>
    <p id="last">p05</p>
    <h3>h3</h3>
    <h5>h5</h5>
    <h5>h5</h5>
</body>
</html>